<!DOCTYPE html>
<#assign ctx=Session.basePath>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>船舶列表</title>
    <link href="${ctx}/easyui/themes/bootstrap/easyui.css" rel="stylesheet" />
    <link href="${ctx}/easyui/themes/icon.css" rel="stylesheet" />
    <link href="${ctx}/inspiniain/font-awesome/css/font-awesome.css" rel="stylesheet">
    <script src="${ctx}/js/jquery-1.12.2.min.js"></script>
    <script src="${ctx}/easyui/jquery.easyui.min.js"></script>
    <script src="${ctx}/easyui/locale/easyui-lang-zh_CN.js"></script>
    <script src="${ctx}/map/js/tool.js"></script>
    <script>
        var company ='<#if company??>${company}<#else></#if>';
    </script>
</head>
<body>

<div id="tb" style="padding:5px;height:auto">
    <div>
        <input id="key" class="easyui-text" style="200px" placeholder="请输入船舶名称或MMSI">
        <#--MMSI : <input id="mmsi" class="easyui-text" style="120px">-->
        <a href="#" class="easyui-linkbutton btn-search" iconCls="icon-search" style="width: 80px;">查找</a>
    </div>
</div>

<table id="dg"
       data-options="rownumbers:true,singleSelect:true,pagination:true,url:'${ctx}<#if company??>/manage/map/company/aisShip/ajax/list<#else>/manage/map/aisShip/ajax/list</#if>',method:'post',toolbar:'#tb'">
    <thead>
    <tr>
        <th data-options="field:'shipname',width:90">船舶</th>
        <th data-options="field:'mmsi',width:90">MMSI</th>
        <th data-options="field:'lon',width:100">经度</th>
        <th data-options="field:'lat',width:100">维度</th>
        <th data-options="field:'speed',width:80">速度</th>
        <th data-options="field:'course',width:80">航向</th>
        <#--<th data-options="field:'shipstatus',width:80">状态</th>-->
        <#--<th data-options="field:'shiptype',width:80">类型</th>-->
        <th data-options="field:'postTimeDesc',width:150">时间</th>
        <th data-options="field:'position',width:80,align:'center'">跟踪</th>
    </tr>
    </thead>
</table>
<script type="text/javascript">
    $(function(){
        var pager = $('#dg').datagrid({
            fitColumns:true,
            fit: true,
            loadFilter: function(data){
                if(data != null && data.rows != null){
                    for(var i = 0; i < data.rows.length; i++){
                        var record = data.rows[i];
                        var lon = record.lon;
                        var lat = record.lat;
                        var position = "<a href='#' onclick='locationMap(\""+record.lon+"\",\""+record.lat+"\",\""+record.mmsi+"\",\""+record.shipname+"\",\""+record.course+"\")'><i style='font-size:20px;' class='fa fa-map-marker' aria-hidden='true'></i></a>";
                        record.position = position;
                        record.lon = SetHMS(lon);
                        record.lat = SetHMS(lat);
                    }
                }
                return data;
            }
        });	// get the pager of datagrid

        $(".btn-search").click(function () {
            $('#dg').datagrid("load",{
                shipname : $("#key").val(),
                mmsi : $("#key").val()
            })
        })

    })

    function locationMap(lon,lat,mmsi,shipname,course) {
        if(lon!='null'&&lat!='null')
        {
            var trackShip={
                trackId:mmsi,
                type:'ais'
            }
            window.parent.locMap(lon,lat,trackShip,shipname,course);
        }

    }
</script>


</body>
</html>